<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音标快速练习</title>
    <link rel="stylesheet" href="quickstyles.css">
    <style>
        /* 分类容器样式 */
        .category-section {
            padding: 15px;
            background: white;
            margin-bottom: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .category-title {
            color: #2d3748;
            font-size: 1.3rem;
            margin: 0 0 15px 0;
            padding-bottom: 8px;
            border-bottom: 3px solid #2A6DFF;
        }

        /* 响应式网格布局 */
        .symbol-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
            gap: 10px;
        }

        /* 音标按钮样式 */
        .symbol-btn {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            background: #2A6DFF;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .symbol-btn:active {
            transform: scale(0.95);
            background: #1a5ad9;
        }

        /* 返回按钮 */
        .back-btn {
            position: fixed;
            left: 15px;
            top: 15px;
            padding: 10px 20px;
            background: white;
            border-radius: 25px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            z-index: 100;
        }

        /* 手机端优化 */
        @media (max-width: 480px) {
            .symbol-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            .symbol-btn {
                font-size: 1.2rem;
            }
        }

        @media (min-width: 481px) and (max-width: 768px) {
            .symbol-grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }
    </style>
</head>

<body>
    <div class="first">    <p><button class="back-btn" onclick="window.history.back()">← 返回</button></p></div>

    <div class="container">
        <!-- 短元音 -->
        <div class="category-section">
            <h2 class="category-title">短元音</h2>
            <div class="symbol-grid" id="short-vowels"></div>
        </div>

        <!-- 长元音 -->
        <div class="category-section">
            <h2 class="category-title">长元音</h2>
            <div class="symbol-grid" id="long-vowels"></div>
        </div>

        <!-- 双元音 -->
        <div class="category-section">
            <h2 class="category-title">双元音</h2>
            <div class="symbol-grid" id="diphthongs"></div>
        </div>

        <!-- 清辅音 -->
        <div class="category-section">
            <h2 class="category-title">清辅音</h2>
            <div class="symbol-grid" id="voiceless"></div>
        </div>

        <!-- 浊辅音 -->
        <div class="category-section">
            <h2 class="category-title">浊辅音</h2>
            <div class="symbol-grid" id="voiced"></div>
        </div>

    <script src="data.js"></script>
    <script>
        // 按分类生成按钮
        const categories = {
            "short-vowels": "短元音",
            "long-vowels": "长元音",
            "diphthongs": "双元音",
            "voiceless": "清辅音",
            "voiced": "浊辅音",
        }

        Object.entries(categories).forEach(([containerId, categoryName]) => {
            const container = document.getElementById(containerId)
            const symbols = window.phoneticData
                .find(c => c.name === categoryName)
                ?.symbols || []
            
            symbols.forEach(symbol => {
                const btn = document.createElement('button')
                btn.className = 'symbol-btn'
                btn.textContent = symbol.symbol
                btn.onclick = () => new Audio(symbol.audio).play()
                container.appendChild(btn)
            })
        })
    </script>
</body>
</html>